@import "ng-tools/ng-tools-styles";
@import "ng-tools/src/components/breadcrumb/breadcrumb.component";

$ngs-color1: #c23034;
$ngs-color2: #038387;
$ngs-color3: #018574;
$ngs-color4: #0063B1;
$ngs-color5: #2D7D9A;
$ngs-color6: #0099BC;
$ngs-hover-color: #ed9830;

$ngsThemeColors: (
  'ngs-color1': $ngs-color1,
  'ngs-color2': $ngs-color2,
  'ngs-color3': $ngs-color3,
  'ngs-color4': $ngs-color4,
  'ngs-color5': $ngs-color5,
  'ngs-color6': $ngs-color6,
);

@each $color, $value in $ngsThemeColors {
  $lightenColor: lighten($value, 5%);
  $darkenColor: darken($value, 5%);
  .ngs-theme-#{$color} {
    app-login {
      .login-page {
        .banner {
          background-color: $value !important;
        }
        .login-form {
          .input-group-prepend {
            .input-group-text {
              background-color: $value !important;
              border-color: $value !important;
              color: color-yiq($value) !important;
            }
          }
          .form-control {
            border-color: $value !important;
          }
          .btn {
            @include button-variant($value, $value);
          }
        }
      }
    }
    app-menu {
      .menu-wrap {
        background-color: $value !important;
        .menu-body-wrap {
          background-color: $value !important;
          .menu-header {
            background-color: $value !important;
          }
        }
        .menu-item-group {
          &.active > .menu-item {
            .menu-text, .menu-text .fa {
              color: $ngs-hover-color !important;
            }
          }
        }
      }
    }
    app-navbar {
      .navbar {
        .dd-alert {
          .navbar-title-a:hover {
            .fa {
              color: $ngs-hover-color !important;
            }
            .badge {
              background-color: $ngs-hover-color !important;
            }
          }
        }
        .user-menu-group {
          .user-btn {
            &:hover {
              color: $ngs-hover-color !important;
              .fa {
                color: $ngs-hover-color !important;
              }
            }
          }
        }
      }
      .btn {
        @include button-variant($lightenColor, $lightenColor);
      }
    }
    app-content {
      ng-tools-step-line {
        .step-line-icon {
          color: $lightenColor !important;
        }
      }
      ng-tools-breadcrumb .breadcrumb-wrap {
        @include breadcrumb-color($lightenColor)
      }
      ng-tools-selector {
        .input-group .input-group-append .btn {
          @include button-variant($lightenColor, $lightenColor);
        }
        .selectorCollapse .btn {
          @include button-outline-variant($lightenColor);
        }
      }
      ng-tools-file-upload {
        .fa-cloud-upload {
          color: $lightenColor !important;
        }
        .file-upload-progress {
          .progress-bar {
            background-color: $lightenColor !important;
          }
        }
      }
      ng-tools-show-formatted-data {
        .fa-copy {
          color: $lightenColor !important;
        }
      }
      version-time-line {
        .timeline {
          border-left-color: $lightenColor !important;
          .tl-upgrade {
            background-color: $lightenColor !important;
            border-color: $lightenColor !important;
            &:hover {
              background-color: $value !important;
              border-color: $value !important;
            }
          }
        }
      }
      .btn {
        @include button-variant($lightenColor, $lightenColor);
      }
      .list-group {
        .list-group-item.active {
          background-color: $lightenColor !important;
          border-color: $lightenColor !important;
        }
      }
      .app-upgrade {
        color: $lightenColor !important;
      }
    }
  }
}
